<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="form"
        v-loading.fullscreen.lock="loading"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :model="form"
        label-width="120px"
        label-position="left"
        :rules="rules"
      >
        <el-form-item label="社团名称" prop="name">
          <el-input v-model.trim="form.name" style="width: 30%" placeholder="" />
        </el-form-item>

        <el-form-item label="社团成立时间">
          <el-date-picker
            v-model="form.established_time"
            style="width: 30%"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-form-item label="社团分类" prop="type_id">
          <el-select v-model="form.type_id" style="width: 30%" filterable placeholder="">
            <el-option
              v-for="item in clubTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="指导单位" prop="business_unit_id">
          <el-select v-model="form.business_unit_id" style="width: 30%" clearable filterable placeholder="">
            <el-option
              v-for="item in facultyList"
              :key="item.id"
              :label="item.faculty_title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="指导老师" prop="teacher_id">
          <el-select
            v-model="form.teacher_id"
            filterable
            remote
            reserve-keyword
            placeholder="请填写指导老师的学工号或者姓名搜索"
            :remote-method="remoteMethod"
            :loading="searchLoading"
            style="width: 30%"
            @change="teacherChange"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.username + '-' + item.realname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-descriptions title="指导老师信息">
            <el-descriptions-item label="姓名">{{ teacherInfo.realname }}</el-descriptions-item>
            <el-descriptions-item label="教工号">{{ teacherInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="所属学院">{{ teacherInfo.faculty_title }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>

        <el-form-item label="社团logo" prop="photo">
          <el-button
            plain
            size="small"
            type="primary"
            @click.native="imagecropperShow=true"
          >点击上传</el-button>

          <crop-upload
            v-model="imagecropperShow"
            field="file"
            :width="300"
            :height="150"
            :url="elUploadUrl"
            :params="elData"
            :headers="richHeaders"
            img-format="png"
            :no-circle="true"
            @crop-success="cropSuccess"
            @crop-upload-success="cropUploadSuccess"
            @crop-upload-fail="cropUploadFail"
            @src-file-set="fileSet"
          />
        </el-form-item>
        <el-form-item>
          <img :src="imgDataUrl">
        </el-form-item>

        <el-form-item label="社团申请文件" prop="file">
          <el-upload
            ref="uploadApply"
            :headers="richHeaders"
            :data="elData"
            :limit="fileLimitCnt"
            :multiple="false"
            accept=".xlsx,.xls,.pdf,.ppt,.doc,.docx,.pptx"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'apply', fileLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, fileLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="applyFileList"
            :on-success="(res) => { return handleSuccess(res, 'apply') }"
            :on-remove="(res) => { return handleRemove(res, 'apply') }"
          >
            <el-button plain size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传{{ fileLimitCnt }}份文件，格式为：word文档，excel, pdf和ppt，且单个文件不超过{{ fileLimitSize }}m</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="社团轮播图片(宽高比2:1)" prop="image">
          <el-upload
            ref="uploadImage"
            list-type="picture-card"
            :headers="richHeaders"
            :data="elData"
            :limit="imageLimitCnt"
            :multiple="false"
            accept=".png,.jpg,.jpeg,.gif"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'image', imageLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, imageLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="imageFileList"
            :on-preview="previewImage"
            :on-success="(res) => { return handleSuccess(res, 'image') }"
            :on-remove="(res) => { return handleRemove(res, 'image') }"
          >
            <i class="el-icon-plus" />
            <div slot="tip" class="el-upload__tip">只能上传{{ imageLimitCnt }}张图片，且单个文件不超过{{ imageLimitSize }}m</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="社团介绍" prop="introduction">
          <RichText :content="form.introduction" :imageurl="richUploadUrl" :headers="richHeaders" :meta="richMeta" @getRichText="getRichText" @getRichHtml="getRichHtml" />
          <el-button style="margin-top: 10px;" type="primary" plain @click="previewDialogVisible = true">预览内容</el-button>
          <el-dialog
            title="内容预览"
            :visible.sync="previewDialogVisible"
            :append-to-body="true"
            width="375px"
          >
            <div class="rich" v-html="form.introduction" />
          </el-dialog>
        </el-form-item>

      </el-form>

      <div style="text-align:left">
        <el-button type="primary" @click="onSubmit">提交表单</el-button>
      </div>

      <el-dialog :visible.sync="previewPicture">
        <img width="100%" :src="previewurl" alt="">
      </el-dialog>

    </el-card>
  </div>
</template>

<script src="./index.js"></script>

<style>
.block {
  padding: 10px 0px;
}
.el-form--label-top .el-form-item__label {
  padding: 0;
}
.rich img {
  width: 100%;
}
</style>

<style scoped>
</style>
